<template>
  <div class="Page">
    <div>
      <a-button @click="ddd">33 {{ isTrue }} </a-button>
      <a-button @click="aaa">市 {{ isTrue }} </a-button>

    </div>
    <div
      :style="{display:isTrue? 'block': 'none'}"
      id="lineOne"
      style="height: 300px;width: 100%"
    ></div>
    <!-- <div style="height: 20px;"></div> -->
    <div
      :style="{display:!isTrue? 'block': 'none'}"
      id="lineTwo"
      style="height: 300px;width: 800px"
    ></div>
    <div style="height: 20px;"></div>
  </div>
</template>
<script>
// 按需加载
const echarts = require('echarts')
// 引入柱状图组件
require('echarts/lib/chart/map')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
// import '@/assets/json/china.js'
// import chinaJson from '@/assets/json/china-china.json'
// import chinaCityJson from '@/assets/json/china-cities.json'
const chinaJson = require('@/assets/json/china-china.json')
const chinaCityJson = require('@/assets/json/china-cities.json')

export default {
  name: 'Page',
  components: {},
  data () {
    return {
      isTrue: true,
      lineOne: {
        layoutCenter: ['50%', '70%'],
        layoutSize: '100%',
        dataZoom: {
          type: 'inside'
        },
        tooltip: {
          textStyle: {
            fontSize: 14
          },
          formatter: function (params) {
            if (params.value) {
              return params.name + ' : ' + params.value
            } else {
              return params.name
            }
          }
        },
        visualMap: {
          min: 0,
          max: 100, // 配置映射器范围,默认0-100
          right: '16%',
          top: 'bottom',
          calculable: true,
          inRange: {
            color: ['#0061EC', '#01FAFB', '#E2CF2B']
          },
          textStyle: {
            color: '#fff'
          },
          itemWidth: 8,
          itemHeight: 70,
          borderColor: 'red',
          show: true
        },
        series: [
          {
            type: 'map',
            mapType: 'china',
            zoom: 1.2, // 根据实际容器调整地图大小
            // top: '20%',
            width: '60%',
            // height: '60%',
            itemStyle: {
              normal: {
                borderColor: '#00E9FF'
              }
            },
            label: {
              show: false,
              textStyle: {
                color: '#fff'
              }
            },
            data: [
              {
                name: '浙江',
                value: 200
              }
            ]
          }
        ]
      },
      lineTwo: {
        layoutCenter: ['50%', '50%'],
        layoutSize: '100%',
        dataZoom: {
          type: 'inside'
        },
        dataset: {
          source: [
            {
              name: '杭州',
              value: 300
            }
          ]
        },
        tooltip: {
          textStyle: {
            fontSize: 14
          },
          formatter: function (params) {
            if (params.value) {
              return params.name + ' : ' + params.value
            } else {
              return params.name
            }
          }
        },
        visualMap: {
          min: 0,
          max: 100, // 配置映射器范围,默认0-100
          left: '1%',
          top: 'bottom',
          calculable: true,
          inRange: {
            color: ['#0061EC', '#01FAFB', '#E2CF2B']
          },
          textStyle: {
            color: '#fff'
          },
          itemWidth: 8,
          itemHeight: 70,
          borderColor: 'red',
          show: true
        },
        series: [
          {
            type: 'map',
            map: 'china',
            itemStyle: {
              borderColor: '#00E9FF'
            },
            emphasis: {
              label: {
                show: false
              },
              itemStyle: {
                areaColor: '#00E9FF'
              }
            }
          }
        ]
      }
    }
  },
  created () { },
  mounted () {
    // this.drawLine()
    this.ddd()
  },
  methods: {
    drawLine () {
      echarts.registerMap('china', chinaJson)
      const myChartOne = echarts.init(document.getElementById('lineOne'))
      myChartOne.setOption(this.lineOne)

      echarts.registerMap('china', chinaCityJson)
      const myChartTwo = echarts.init(document.getElementById('lineTwo'))
      myChartTwo.setOption(this.lineTwo)
    },
    ddd () {
      this.isTrue = true
      this.lineOne.series[0].data = [
        {
          name: '浙江',
          value: 200
        },
        {
          name: '河南',
          value: 400
        }
      ]
      console.log(echarts)
      echarts.registerMap('china', chinaJson)
      const myChartOne = echarts.init(document.getElementById('lineOne'))
      console.log(myChartOne)
      myChartOne.setOption(this.lineOne)
    },
    aaa () {
      this.lineTwo.dataset.source = [
        {
          name: '南京',
          value: 200
        },
        {
          name: '杭州',
          value: 400
        },
        {
          name: '郑州',
          value: 600
        }
      ]
      this.isTrue = false
      echarts.registerMap('china', chinaCityJson)
      const myChartTwo = echarts.init(document.getElementById('lineTwo'))
      myChartTwo.setOption(this.lineTwo)
    }

  }
}
</script>
<style scoped lang="less">
</style>
